<template>
  <div class="dataTable">
    <div class="header">
      <div class="flex">
        <div class="key_icon" />
        <div>账户列表</div>
      </div>
      <div class="flex">
        <div class="flex" style="margin-right: 10px;">
          <div class="label" style="margin-right: 10px;">账户状态:</div>
          <el-select v-model="stat" placeholder="请选择账户状态" clearable @change="statChange">
            <el-option label="启用" :value="1" />
            <el-option label="停用" :value="2" />
          </el-select>
        </div>
        <el-input v-model="keyword" class="search_input" prefix-icon="el-icon-search" placeholder="请输入账号或姓名进行搜索" @input="keywordChange" @keyup.enter.native="onSearch" />
        <el-button class="search_btn" type="primary" icon="el-icon-plus" @click="add_visible = true">新增</el-button>
      </div>
    </div>
    <el-table
      v-loading="loading"
      :data="dataList"
    >
      <el-table-column
        prop="account"
        label="账号"
        width="220"
      />
      <el-table-column
        prop="real_name"
        label="姓名"
        width="200"
      />
      <el-table-column
        prop="role.role_name_zh"
        label="角色"
        width="250"
      />
      <el-table-column
        prop="email"
        label="邮箱"
        width="280"
      />
      <el-table-column
        prop="status"
        label="账户状态"
        width="180"
      >
        <div slot-scope="{row}">
          <el-switch
            :value="row.status === 1"
            @change="statusChange($event, row)"
          />
          <!-- <div :class="row.status === 1 ? 'sucess_point' : 'fail_point'" />{{ row.status === 1 ? '启用' : '停用' }} -->
        </div>
      </el-table-column>
      <el-table-column
        prop="operate"
        label="操作"
        width="150"
      >
        <div slot-scope="{row}" style="display: flex;">
          <el-tooltip effect="dark" content="编辑" placement="top">
            <div class="edit_icon" @click="() => { edit_visible = true; checkData = row }" />
          </el-tooltip>
          <el-tooltip effect="dark" content="删除" placement="top">
            <div class="delete_icon" @click="remove(row)" />
          </el-tooltip>
        </div>
      </el-table-column>
    </el-table>
    <el-pagination
      style="text-align: center; margin-top: 20px;"
      :current-page="pager.page"
      :page-sizes="pager.pageSizes"
      :page-size="pager.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pager.total"
      @size-change="pageSizeChange"
      @current-change="pageChange"
    />
    <add :visible="add_visible" @close="closeAdd" />
    <edit :visible="edit_visible" :check-data="checkData" @close="closeEdit" />
  </div>
</template>

<script>
import { account_list, account_delete, account_update } from '@/api/account'
import edit from './edit-dialog.vue'
import add from './add-dialog.vue'

export default {
  name: 'DataTable',
  components: { edit, add },
  data() {
    return {
      stat: 1,
      keyword: '',
      loading: false,
      pager: {
        page: 1,
        pageSizes: [5, 10, 20],
        pageSize: 10,
        total: 0
      },
      dataList: [],
      add_visible: false,
      edit_visible: false,
      checkData: {}
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    async loadData() {
      this.loading = true
      try {
        const param = {
          with: 'role',
          stat: this.stat,
          keyword: this.keyword,
          page: this.pager.page,
          'sort_order[create_time]': 'desc',
          per_page: this.pager.pageSize
        }
        const { code, data } = await account_list(param)
        if (!code) {
          this.dataList = data.data
          const { pager } = this
          pager.page = data.current_page
          pager.total = data.total
          pager.pageSize = Number(data.per_page)
        }
        this.loading = false
      } catch (error) {
        console.error(error)
      } finally {
        this.loading = false
      }
    },
    async statusChange(e, row) {
      try {
        const param = {
          account: row.account,
          role_id: row.role_id,
          real_name: row.real_name,
          status: e ? 1 : 2
        }
        const { code } = await account_update(row.account, param)
        if (!code) {
          this.$messageOnce.success(`${e ? '启用' : '停用'}成功`)
          this.loadData()
        }
      } catch (error) {
        console.error(error)
      }
    },
    remove(data) {
      this.$confirm('此操作将永久删除该账号, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        this.loading = true
        try {
          const { code } = await account_delete(data.account)
          if (!code) {
            this.$messageOnce.success('删除成功！')
            this.loadData()
          }
        } catch (error) {
          console.error(error)
        } finally {
          this.loading = false
        }
      }).catch(() => { })
    },
    keywordChange(keyword) {
      if (!keyword) {
        this.onSearch()
      }
    },
    statChange(e) {
      this.onSearch()
    },
    onSearch() {
      const { pager } = this
      pager.page = 1
      this.loadData()
    },
    closeAdd() {
      this.add_visible = false
    },
    closeEdit() {
      this.edit_visible = false
    },
    pageSizeChange(val) {
      const { pager } = this
      pager.pageSize = val
      this.loadData()
    },
    pageChange(val) {
      const { pager } = this
      pager.page = val
      this.loadData()
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";

.dataTable {
	width: 1320px;
	min-height: 500px;
	background: #FFFFFF;
	box-shadow: 0px 6px 25px 0px rgba(0, 0, 0, 0.04);
	border-radius: 10px;
	margin: 0 auto;
	margin-top: 30px;
	padding: 20px;
	.header {
		display: flex;
		justify-content: space-between;
		font-size: 18px;
		font-family: SourceHanSansCN-Medium, SourceHanSansCN;
		font-weight: 500;
		color: #2C2C2C;
		margin-bottom: 25px;
		.key_icon {
			width: 16px;
			height: 16px;
			background: url('../../assets/privateKey/account.png');
			background-size: 100%;
			margin-right: 10px;
		}
		.search_input {
			width: 300px;
		}
		.search_btn {
			margin-left: 80px;
		}
	}
}

.label {
  font-size: 14px;
  color: #606266;
  font-weight: 700px;
}

.flex {
	display: flex;
	align-items: center;
}

.edit_icon {
	background: url('../../assets/edit@list.png');
  @include list_icons;
}

.delete_icon{
  background: url('../../assets/delete@list.png');
  @include list_icons;
}

.sucess_point{
  @include points;
  display: inline-block;
  background: #52C41A;
}

.fail_point{
  @include points;
	display: inline-block;
  background: #999999;
}

.search_input ::v-deep .el-input__inner{
  border-radius: 30px;
	border: 1px solid #E4E4E4;
}
</style>
